<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNF手游职业选择测试</title>
    <style>
         body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f7f7f7;
        }
        h1, h2 {
            text-align: center;
            color: #333;
        }
        .question {
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .choices {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .choice {
            margin: 0 10px;
            padding: 10px 20px;
            background-color: #eee;
            cursor: pointer;
            border-radius: 5px;
        }
        .choice:hover {
            background-color: #ddd;
        }
        #result {
            text-align: center;
            display: none;
            margin-top: 20px;
        }
        #result p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>DNF手游职业选择测试</h1>
        <div class="question" v-for="(question, index) in questions" :key="index" v-show="index === currentQuestionIndex">
            <h2>{{ question.text }}</h2>
            <div class="choices">
                <div class="choice" v-for="(choice, choiceIndex) in question.choices" :key="choiceIndex" @click="answerQuestion(choiceIndex)">
                    {{ choice }}
                </div>
            </div>
        </div>
        <div id="result">
            <h2>测试结果：</h2>
            <p>{{ result }}</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                currentQuestionIndex: 0,
                userAnswers: [],
                userVector : [0, 0, 0, 0, 0, 0, 0, 0, 0,0],
                jobs : [
                        { name: '狂战士', vector: [9, 3, 9, 4, 9, 9, 3, 9, 9,1] },
                        { name: '枪炮师', vector: [5, 5, 4, 3, 4, 5, 5, 9, 5,1] },
                        { name: '魔道学者', vector: [4, 4, 5, 5, 8, 2, 3, 5, 2,1] },
                        { name: '鬼泣', vector: [9, 4, 5, 9, 3, 2, 3, 5, 5,1] },
                        { name: '散打', vector: [9, 3, 2, 2, 5, 5, 3, 4, 7,1] },
                    ],
                questions: [
                    {
                        text: '问题1：你更喜欢哪种战斗风格？',
                        choices: ['近战搏击', '远程攻击', '控制与辅助'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题2：你在团队中的角色通常是什么？',
                        choices: ['主力输出', '控场辅助', '生存坦克'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题3：你更倾向于哪种类型的武器？',
                        choices: ['大剑', '枪械', '魔法杖'],
                        scores:[9,2,5]
                    },
                    {
                        text: '问题4：你对技能的要求是？',
                        choices: ['高爆发', '持续伤害', '多功能性'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题5：你喜欢的战斗节奏是？',
                        choices: ['快速、激烈', '稳定、持续', '灵活、多变'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题6：你在游戏中更关注什么？',
                        choices: ['高伤害输出', '团队配合', '生存能力'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题7：你觉得哪种战斗场景更适合你？',
                        choices: ['就是干，跳进怪堆里', '远距离狙击', '使用魔法的法阵'],
                        scores:[9,2,6]
                    },
                    {
                        text: '问题8：你喜欢哪种类型的技能效果？',
                        choices: ['视觉震撼的爆炸', '精准打击', '华丽的魔法效果'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题9：能否接受高昂的装备价格？',
                        choices: ['我是土豪无所谓', '考虑下', '不行'],
                        scores:[9,5,2]
                    },
                    {
                        text: '问题10：你认为一个理想的职业应该是？',
                        choices: ['能够独当一面', '能与队友默契配合', '能适应多种战斗需求'],
                        scores:[9,5,2]
                    }
                ],
                results: {
                    '狂战士': '如果你的答案多数是A，且偏向近战与高爆发。',
                    '鬼泣': '如果你的答案多数是B，偏向远程与高伤害。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    '魔道学者': '如果你的答案多数是C，偏向魔法与多功能性。',
                    // 添加更多职业结果
                },
                result: ''
            },
            methods: {
                // 用户选择答案，根据选项索引更新用户答案向量
                 updateVector(choiceIndex) {
                    // 你可以在这里根据用户的选择来调整用户答案向量
                    // 例如，如果用户选择了第一个选项，则可以增加对应位置的权重
                    //let vectorMap = {1:7,2:3,3:5,4:3,5:5,6:3,7:5,8:3,9:5,10:3}
                    console.log(this.questions[this.currentQuestionIndex],this.choiceIndex)
                    let score = this.questions[this.currentQuestionIndex].scores[choiceIndex]
                    this.userVector[this.currentQuestionIndex] += score;
                },
                 cosineSimilarity(v1, v2) {
                    const dotProduct = v1.reduce((acc, cur, index) => acc + (cur * v2[index]), 0);
                    const magnitude1 = Math.sqrt(v1.reduce((acc, cur) => acc + Math.pow(cur, 2), 0));
                    const magnitude2 = Math.sqrt(v2.reduce((acc, cur) => acc + Math.pow(cur, 2), 0));
                    return dotProduct / (magnitude1 * magnitude2);
                },
                answerQuestion(choiceIndex) {
                    this.userAnswers.push(choiceIndex);
                    this.updateVector(choiceIndex)
                    console.log(this.userVector)
                    const bestJob = this.determineJob();
                    console.log('最适合的职业是：', bestJob);
                    if (this.currentQuestionIndex < this.questions.length - 1) {
                        this.currentQuestionIndex++;
                    } else {
                        this.showResult();
                    }
                },
                // 根据用户答案向量计算最适合的职业
                determineJob() {
                    let bestMatch = { name: '', similarity: -1 };
                    for (let job of this.jobs) {
                        const similarity = this.cosineSimilarity(this.userVector, job.vector);
                        if (similarity > bestMatch.similarity) {
                            bestMatch = { name: job.name, similarity: similarity };
                        }
                    }
                    return bestMatch.name || '狂战士';
                },
                showResult() {
                    const counts = [0, 0, 0];
                    for (let answer of this.userAnswers) {
                        counts[answer]++;
                    }
                    let maxIndex = counts.indexOf(Math.max(...counts));
                    this.result = maxIndex !== -1 ? Object.keys(this.results)[maxIndex] : '无法确定适合的职业';
                    document.getElementById('result').style.display = 'block';
                }
            }
        });
    </script>
</body>
</html>
